import React, { Component } from 'react';
import { Result, Button } from 'antd';

class NotFound extends Component {
    state = {
        interval: 5
    };

    componentDidMount () {
        let num = 5;
        this.setIntervalHandle = setInterval(() => {
            num--;
            if (num < 1) {
                this.goBackHandle();
            }
            this.setState({ interval: num });
        }, 1000);
    }

    componentWillUnmount () {
        clearInterval(this.setIntervalHandle);
    }

    goBackHandle = () => {
        this.props.history.goBack();
    };

    render () {
        const { interval } = this.state;
        const style = {
            width: '100vw',
            height: '100vh',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
        };
        return (
            <>
                <div style={style}>
                    <Result
                        status="404"
                        title="页面跑丢喽"
                        subTitle={interval + 's后返回'}
                        extra={<Button type="primary" onClick={this.goBackHandle}>返回</Button>}
                    />
                </div>
            </>
        );
    }
}

export default NotFound;